<template>
    <el-card class="form-container" shadow="never">
        <el-form
                :model="devicemeal"
                ref="bannerFrom"
                label-width="150px"
                size="small"
        >
            <el-form-item label="套餐名称:">
                <el-input v-model="devicemeal.mealName" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="时长:">
                <el-input v-model="devicemeal.duration" type="number" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="套餐价格:">
                <el-input v-model="devicemeal.price" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="美团套餐id:" prop="price">
                <el-input v-model="devicemeal.meituanDealId" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="仅指定时间可用:">
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="开始时间:" v-if="value">
                <el-time-picker
                        v-model="devicemeal.startTime"
                        value-format="HH:mm:ss"
                        :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59',
                        }"
                        placeholder="开始的时间">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="结束时间:" v-if="value">
                <el-time-picker
                        v-model="devicemeal.endTime"
                        :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                        }"
                        placeholder="结束的时间">
                </el-time-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('bannerFrom')"
                >提交
                </el-button
                >
                <el-button v-if="!isEdit" @click="resetForm('bannerFrom')"
                >重置
                </el-button
                >
            </el-form-item>

        </el-form>
    </el-card>
</template>
<script>
    import SingleUpload from "@/components/Upload/singleUpload";
    import {createDevicemeal, updateDevicemeal, getDevicemeal} from "@/api/qsg/devicemeal";

    const defaultDevice = {
        mealName: '',
        duration: 0,
        price: 0.00,
        isSpecialTime: 1
    };

    export default {
        name: "DevicemealDetail",
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                devicemeal: null,
                value: false
            };
        },
        created() {
            if (this.isEdit) {
                getDevicemeal(this.$route.query.id).then((response) => {
                    this.devicemeal = response.data;
                    if (this.devicemeal.isSpecialTime == 0) {
                        this.value = true
                    }
                });
            } else {
                this.devicemeal = Object.assign({}, defaultDevice);
            }
        },
        methods: {
            onSubmit(formName) {
                if (this.value) {
                    this.devicemeal.isSpecialTime = 0;
                    console.log(typeof this.devicemeal.endTime)
                    if (typeof this.devicemeal.startTime == "undefined" || typeof this.devicemeal.endTime == "undefined"){
                        this.$message({
                            message: "时间不能为空",
                            type: "error",
                            duration: 2000,
                        });
                        return false;
                    }
                } else {
                    this.devicemeal.isSpecialTime = 1
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm("是否提交数据", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            if (this.isEdit) {
                                updateDevicemeal(this.$route.query.id, this.devicemeal).then(
                                    (response) => {
                                        this.$refs[formName].resetFields();
                                        this.$message({
                                            message: "修改成功",
                                            type: "success",
                                            duration: 1000,
                                        });
                                        this.$router.back();
                                    }
                                );
                            } else {
                                createDevicemeal(this.devicemeal).then((response) => {
                                    this.$refs[formName].resetFields();
                                    this.devicemeal = Object.assign({}, defaultDevice);
                                    this.$message({
                                        message: "提交成功",
                                        type: "success",
                                        duration: 1000,
                                    });
                                });
                            }
                        });
                    } else {
                        this.$message({
                            message: "验证失败",
                            type: "error",
                            duration: 1000,
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.devicemeal = Object.assign({}, defaultDevice);
            },
        },
    };
</script>
<style scoped>
    .input-width {
        width: 70%;
    }
</style>


